<template>
  <el-dialog :title="title" :visible.sync="isShow" width="600px" :center="true" :close-on-click-modal="false" @open='ifshow' @close="closeLayer">
    <div class="layer-info">

      <div class="layer-row layer-row-text">
        <div class="layer-col layer-col1">
          <span class="layer-name1">
            保单号：
          </span>
          <span v-if="layerData.guaranteeSlipNumber " class="layer-text">
            {{layerData.guaranteeSlipNumber }}
          </span>
          <span v-else class="layer-text">
            -
          </span>
        </div>
        <div class="layer-col layer-col2">
          <span class="layer-name2">
            政策保单手续费：
          </span>
          <span v-if="layerData.charge" class="layer-text">
            {{layerData.charge | numFilter}}&nbsp;元
          </span>

          <span v-else class="layer-text">
            -
          </span>
        </div>
      </div>
      <div class="layer-row layer-row-text">
        <div class="layer-col layer-col1">
          <span class="layer-name1">
            业务员：
          </span>
          <span v-if="layerData.name" class="layer-text">
            {{layerData.name}}
          </span>
          <span v-else class="layer-text">
            -
          </span>
        </div>
        <div class="layer-col layer-col2">
          <span class="layer-name2">
            政策车船税手续费：
          </span>
          <span v-if="layerData.vehicleAndVesselTax && layerData.guaranteeSlipType==2" class="layer-text">
            {{layerData.vehicleAndVesselTax | numFilter}}&nbsp;元
          </span>

          <span v-else class="layer-text">
            -
          </span>
        </div>
      </div>
      <div class="layer-row layer-row-text">
        <div class="layer-col layer-col1">
          <span class="layer-name1">
            保险类型：
          </span>
          <span v-if="layerData.guaranteeSlipType=='1'" class="layer-text">商业险
          </span>
          <span v-else-if="layerData.guaranteeSlipType=='2'" class="layer-text">交强险
          </span>
          <span v-else>-</span>
        </div>
        <div class="layer-col layer-col2">
          <span class="layer-name2">
            政策附加奖励：
          </span>
          <span v-if="layerData.additionalReward" class="layer-text">
            {{layerData.additionalReward | numFilter}}&nbsp;元
          </span>
          <span v-else class="layer-text">
            -
          </span>
        </div>
      </div>
      <div class="layer-row layer-row-text">
        <div class="layer-col layer-col1">
          <span class="layer-name1">
            所属部门：
          </span>
          <span v-if="layerData.organizationUnitName" class="layer-text">
            {{layerData.organizationUnitName | lastname}}
          </span>
          <span v-else class="layer-text">
            -
          </span>
        </div>
        <div class="layer-col layer-col2">
          <span class="layer-name2">
            政策金额：
          </span>
          <span class="layer-text">
            <span v-if="layerData.totalCost" class="layer-red"> {{layerData.totalCost | numFilter}} &nbsp;元</span>
            <span v-else class=""> - </span>
          </span>
        </div>
      </div>
    </div>
    <div class="layer-form">
      <p class="layer-tips">
        实结金额
      </p>
      <!-- <template >
        <div class="layer-row">

          <div class="layer-col">
            <span class="layer-name2">
              保单手续费：
            </span>
            <span class="layer-text" v-if="radios == '2'">
              {{layerData.aPoundage | numFilter}}
            </span>
            <el-input type="text" v-else class="wd80" @change="clearNoNum($event,'aPoundage',layerData.totalPremium)" size="mini" v-model="layerData.aPoundage"></el-input>&nbsp;元
          </div>
          <div class="layer-col">
            <span class="layer-name2">
              附加奖励金额：
            </span>
            <span class="layer-text" v-if="radios == '2'">
              {{layerData.aAdditionalReward | numFilter}}
            </span>
            <el-input type="text" v-else class="wd80" @change="clearNoNum($event,'aAdditionalReward',layerData.totalPremium)" size="mini" v-model="layerData.aAdditionalReward"></el-input>&nbsp;元
          </div>
        </div>
        <div class="layer-row">
          <div class="layer-col">
            <span class="layer-name2">
              实结金额合计：
            </span>
            <span class="layer-text">
              <span v-if="aloneMoney" class="layer-red"> {{aloneMoney}} &nbsp;元</span>
              <span v-else>-</span>
            </span>
          </div>
        </div>
      </template> -->
      <div class="layer-row">
        <span class="layer-name3">
          修改类型：
        </span>
        <el-radio-group v-model="radios">
          <el-radio label="1">按金额</el-radio>
          <el-radio label="2">按比例</el-radio>
        </el-radio-group>
      </div>

      <div class="layer-form-cent">

        <div class="layer-row">
          <div class="layer-col">
            <span class="layer-name2">
              保单手续费比例：
            </span>

            <span class="layer-text" v-if="radios == '1'">
              {{layerData.aPoundageRatio | numFilter}}
            </span>
            <el-input v-else-if="radios == '2'" type="text" @change="clearNoNum($event,'aPoundageRatio',100)" class="wd80" size="mini" v-model="layerData.aPoundageRatio"></el-input> %

          </div>
          <div class="layer-col">
            <span class="layer-name2">
              保单手续费：
            </span>
            <span class="layer-text" v-if="radios == '2'">
              {{layerData.aPoundage | numFilter}}
            </span>
            <el-input type="text" v-else class="wd80" @change="clearNoNum($event,'aPoundage',layerData.totalPremium)" size="mini" v-model="layerData.aPoundage"></el-input>&nbsp;元
          </div>
        </div>

        <div class="layer-row">
          <div class="layer-col">
            <span class="layer-name2">
              附加奖比例：
            </span>
            <span class="layer-text" v-if="radios == '1'">
              {{layerData.aAdditionalRewardRatio | numFilter}}
            </span>
            <el-input type="text" v-else class="wd80" @change="clearNoNum($event,'aAdditionalRewardRatio',100)" size="mini" v-model="layerData.aAdditionalRewardRatio"></el-input> %
          </div>
          <div class="layer-col">
            <span class="layer-name2">
              附加奖励金额：
            </span>
            <span class="layer-text" v-if="radios == '2'">
              {{layerData.aAdditionalReward | numFilter}}
            </span>
            <el-input type="text" v-else class="wd80" @change="clearNoNum($event,'aAdditionalReward',layerData.totalPremium)" size="mini" v-model="layerData.aAdditionalReward"></el-input>&nbsp;元
          </div>
        </div>
        <div class="layer-row">
          <div class="layer-col">
            &nbsp;
            <!-- <span class="layer-name3">
                车船税手续费比例：
              </span>
              <span class="layer-text"  v-if="radios == '1'">
               {{layerData.aVehicleAndVesselTaxRatio}}
              </span>
              <el-input type="text"  v-else class="wd80" size="mini" v-model="layerData.aVehicleAndVesselTaxRatio"></el-input> % -->
          </div>
          <div class="layer-col" v-if="layerData.guaranteeSlipType==2">
            <span class="layer-name2">
              车船税手续费：
            </span>
            <span class="layer-text" v-if="radios == '2'">
              {{layerData.aVehicleAndVesselTax | numFilter}}
            </span>
            <el-input type="text" v-else class="wd80" size="mini" @change="clearNoNum($event,'aVehicleAndVesselTax')" v-model="layerData.aVehicleAndVesselTax"></el-input>&nbsp;元
          </div>
        </div>
        <div class="layer-row">

          <span class="layer-name1">
            实结金额合计：
          </span>
          <span class="layer-text">
            <span v-if="yingjie" class="layer-red"> {{yingjie | numFilter}} &nbsp;元</span>
            <span v-else class="layer-red"> -</span>
            <!-- {{layerData.totalCost}} -->
          </span>

        </div>
        <div class="layer-row">

          <span class="layer-name1">
            备注信息：
          </span>
          <el-input type="text" class="wd370" size="mini" v-model="layerData.aRemark"></el-input>

        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="save(layerData)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "layer",
  props: {
    title: {
      type: String
    },
    datas: {
      type: Object
    },
    isShow: {
      type: Boolean,
      default: false
    },
    types: {
      type: Number,
      default: null
    },
    save: {
      type: Function,
      default: null
    },
    closeLayer: {
      type: Function
    },
    guaranteeSlipType: {
      type: Number
    }
  },

  computed: {
    baodan() {
      // let radios = this.radios;
      // if (radios == "1") {
      //   let num = this.layerData.aPoundage / this.layerData.totalPremium * 100;
      //   if (!isNaN(num)) {
      //     this.layerData.aPoundageRatio =  num.toFixed(2)
      //   }
      // } else {
      //   let num = this.layerData.totalPremium * (this.layerData.aPoundageRatio / 100);
      //   if (!isNaN(num)) {
      //     this.layerData.aPoundage = num.toFixed(2)
      //   }
      // }
    },
    che() {
      let radios = this.radios;
      if (radios == "1") {
        let num =
          (this.layerData.aVehicleAndVesselTax / this.layerData.totalPremium) *
          100;
        if (!isNaN(num)) {
          this.layerData.aVehicleAndVesselTaxRatio =
            Math.floor(num * 100) / 100;
        }
      } else {
        let num =
          this.layerData.totalPremium *
          (this.layerData.aVehicleAndVesselTaxRatio / 100);
        if (!isNaN(num)) {
          this.layerData.aVehicleAndVesselTax = Math.floor(num * 100) / 100;
        }
      }
    },
    fujia() {
      let radios = this.radios;
      if (radios == "1") {
        let num =
          (this.layerData.aAdditionalReward / this.layerData.totalPremium) *
          100;
        if (!isNaN(num)) {
          this.layerData.aAdditionalRewardRatio = Math.floor(num * 100) / 100;
        }
      } else {
        let num =
          this.layerData.totalPremium *
          (this.layerData.aAdditionalRewardRatio / 100);
        if (!isNaN(num)) {
          this.layerData.aAdditionalReward = Math.floor(num * 100) / 100;
        }
      }
    },
    yingjie() {
      let baodan = this.layerData.aPoundage;
      let fujia = this.layerData.aAdditionalReward;
      let che = this.layerData.aVehicleAndVesselTax;
      console.log(baodan, fujia, che);
      console.log("111");
      let yingjie = Number(baodan) + Number(fujia) + Number(che);
      // this.layerData.totalCost = yingjie
      console.log(yingjie);
      if (!isNaN(yingjie)) {
        return yingjie;
      }
    },
    aloneMoney() {
      let baodan = this.layerData.aPoundage;
      let fujia = this.layerData.aAdditionalReward;
      let yingjie = Number(baodan) + Number(fujia);
      console.log(yingjie);
      if (!isNaN(yingjie)) {
        return yingjie;
      }
    }
  },
  filters: {
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    }
  },
  mounted() {},
  data() {
    return {
      layerData: {},
      radios: "1",
      datas: {
        guaranteeSliId: "00000000-0000-0000-0000-000000000000",
        guaranteeSlipNumber: "21233",
        name: "朱迪",
        guaranteeSlipType: 1,
        organizationUnitName: "组织机构名称",
        charge: 100,
        vehicleAndVesselTax: 200,
        additionalReward: 300,
        totalCost: 3000,
        totalPremium: 3200,
        totalNetPremium: 2200,
        premiumType: 0,
        isReward: true,
        aPoundageRatio: 10,
        aPoundage: 400,
        aVehicleAndVesselTaxRatio: 12,
        aVehicleAndVesselTax: 310,
        aAdditionalRewardRatio: 11,
        aAdditionalReward: 400
      },
      show: false
    };
  },
  methods: {
    ifshow() {
      const _this = this;
      _this.layerData = Object.assign({}, {}, {});
      let settleTypes = this.types;
      let id = this.datas.id;
      console.log(this.datas);
      console.log("**********************************2");
      if (this.isShow) {
        if (_this.datas.cid || _this.datas.batchId) {
          let params = {
            guaranteeSlipId: _this.datas.id,
            batchId: _this.datas.batchId
          };
          this.post(
            params,
            "services/app/settle/LowerSettleDetailSettleInfo"
          ).then(rs => {
            if (rs.success) {
              let a = {};
              if (rs.result) {
                a = rs.result;
                a.cid = _this.datas.cid;
                var b = Object.assign(a, a, {
                  aPoundageRatio: this.numFilter(a.aPoundageRatio),
                  aPoundage: this.numFilter(a.aPoundage),
                  aAdditionalRewardRatio: this.numFilter(
                    a.aAdditionalRewardRatio
                  ),
                  aAdditionalReward: this.numFilter(a.aAdditionalReward),
                  aVehicleAndVesselTax: this.numFilter(a.aVehicleAndVesselTax)
                });
                _this.layerData = b;
              } else {
                _this.layerData = {};
              }
            }
          });
        } else {
          let params = {
            guaranteeSlipId: id,
            settleTypes: settleTypes
          };
          this.post(params, "services/app/settle/SettleDetailSettleInfo").then(
            rs => {
              if (rs.success) {
                if (rs.result) {
                  var a = {};
                  a = rs.result;
                  console.log(a);
                  var b = Object.assign(a, a, {
                    aPoundageRatio: this.numFilter(a.aPoundageRatio),
                    aPoundage: this.numFilter(a.aPoundage),
                    aAdditionalRewardRatio: this.numFilter(
                      a.aAdditionalRewardRatio
                    ),
                    aAdditionalReward: this.numFilter(a.aAdditionalReward),
                    aVehicleAndVesselTax: this.numFilter(a.aVehicleAndVesselTax)
                  });
                  console.log(b);

                  _this.layerData = b;
                  console.log(_this.layerData);
                  console.log("**********************************3");
                }
              }
            }
          );
        }
      }
    },

    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    },
    clearNoNum(obj, name, maxnum) {
      obj = obj.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      obj = obj.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      obj = obj
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (obj.indexOf(".") < 0 && obj != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        obj = parseFloat(obj);
      }

      if (maxnum && obj > maxnum) {
        obj = maxnum;
      }
      var obj = this.numFilter(obj);
      if (name) {
        this.layerData[name] = obj;
      }
      this.mackChange(name);

      return obj;
    },
    //笨办法 根据name改变对应的数值
    mackChange(name) {
      //let num = this.layerData[name]
      if (name == "aPoundageRatio") {
        let num =
          this.layerData.totalPremium * (this.layerData.aPoundageRatio / 100);
        this.layerData.aPoundage = num.toFixed(2);
      }
      if (name == "aPoundage") {
        let num =
          (this.layerData.aPoundage / this.layerData.totalPremium) * 100;
        if (!isNaN(num)) {
          this.layerData.aPoundageRatio = num.toFixed(2);
        }
      }
      if (name == "aAdditionalReward") {
        let num =
          (this.layerData.aAdditionalReward / this.layerData.totalPremium) *
          100;
        if (!isNaN(num)) {
          this.layerData.aAdditionalRewardRatio = num.toFixed(2);
        }
      }
      if (name == "aAdditionalRewardRatio") {
        let num =
          this.layerData.totalPremium *
          (this.layerData.aAdditionalRewardRatio / 100);
        if (!isNaN(num)) {
          this.layerData.aAdditionalReward = num.toFixed(2);
        }
      }
      // if (radios == "1") {
      //   let num = this.layerData.aPoundage / this.layerData.totalPremium * 100;
      //   if (!isNaN(num)) {
      //     this.layerData.aPoundageRatio =  num.toFixed(2)
      //   }
      // } else {
      //   let num = this.layerData.totalPremium * (this.layerData.aPoundageRatio / 100);
      //   if (!isNaN(num)) {
      //     this.layerData.aPoundage = num.toFixed(2)
      //   }
      // }
    },
    baoChange(event) {
      let min = this.clearNoNum(event);
      this.min = min;
    },
    hasOneShowingChildren(children) {
      const showingChildren = children.filter(item => {
        return !item.hidden;
      });
      if (showingChildren.length === 1) {
        return true;
      }
      return false;
    }
  }
};
</script>
<style lang="scss" scoped>
.layer-cent {
  width: 480px;
  background: #fff;
  padding: 20px;
  font-size: 13px;
}
.layer-info {
  font-size: 13px;
}
.layer-row {
  line-height: 28px;
  height: 28px;
  margin-bottom: 17px;
  font-size: 13px;
  .layer-col {
    width: 50%;
    float: left;
    .layer-name1 {
      display: inline-block;
      color: #666;
      width: 80px;
    }
    .layer-name2 {
      display: inline-block;
      width: 120px;
      color: #666;
    }
    .layer-text {
      display: inline-block;
      color: #333;
    }
    .layer-name3 {
      color: #666;
    }
  }
  .layer-col2 {
    width: 40%;
  }
  .layer-col1 {
    width: 60%;
  }
}
.layer-row-text {
  margin-bottom: 0;
}
.wd370 {
  width: 370px;
}
.wd80 {
  width: 80px;
}
.layer-tips {
  color: #ff7819;
  font-size: 14px;
  margin-top: 14px;
  line-height: 20px;
}
.layer-red {
  color: #d6313e;
}
</style>
